<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<title></title>
		<style>
			* {
				user-select: none;
			}
			button{
				width: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			爱好:
			<label><input type="checkbox" value="1" v-model="likearr" />唱</label>
			<label><input type="checkbox" value="2" v-model="likearr" />跳</label>
			<label><input type="checkbox" value="3" v-model="likearr" />rap</label>
			<label><input type="checkbox" value="4" v-model="likearr" />篮球</label>
			<label><input type="checkbox" value="5" v-model="likearr" />music</label>
			<br/>
			<button @click="setall" v-if="show">全选</button>
			<button @click="notsetall" v-if="!show">全不选</button>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				show: true,
				likearr: [
					1,4,5
				]
			},
			methods: {
				setall(){//全选
					this.show = false
					this.likearr = [1,2,3,4,5]
					// this.likearr.push(2);
					// this.likearr.push(3);
				},
				notsetall(){//全不选
					this.show = true
					this.likearr = []
				}
			}
		})
	</script>
</html>